<template lang="">
  <div class="category">
    <el-card shadow="never">
      <div slot="header">
        <span>分类管理</span>
      </div>
      <div class="all-category">
        <div class="title">乐居分类:</div>
        <div class="categorys">
          <el-card
            v-for="item in lejuCategory"
            :key="item.id"
            shadow="hover"
            class="category-card"
          >
            <div slot="header">
              <span>{{ item.name }}</span>
            </div>
            <el-upload
              ref="upload"
              action="http://leju.bufan.cloud/lejuAdmin/material/uploadFileOss"
              :headers="token"
              :show-file-list="false"
              :on-success="
                (res) => {
                  handleCategoryIconUpload(item, res);
                }
              "
            >
              <img :src="item.icon" class="category-icon">
            </el-upload>
          </el-card>
        </div>
      </div>
      <div class="all-category-table">
        <div class="title">全部分类:</div>
        <el-table
          :data="categorys"
          stripe
          row-key="id"
          border
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >>
          <el-table-column
            prop="name"
            label="菜单名称"
            width="150"
          />
          <el-table-column
            prop="name"
            label="icon"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <img :src="scope.row.icon" class="table-icon">
            </template>
          </el-table-column>
          <el-table-column
            prop="keywords"
            label="分类名称"
            width="150"
          />
          <el-table-column
            prop="sort"
            label="排序"
            width="150"
          />
          <el-table-column
            prop="name"
            label="显示状态"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.showStatus? "显示": "不显示" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="导航栏展示"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.navStatus? "展示": "不展示" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            align="center"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="200"
            align="center"
          />
        </el-table>

      </div>
    </el-card>
  </div>
</template>
<script>
import { getAllCategory } from '@/api/product/detail/index'
import { updateCategory } from '@/api/product/category/index'

import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      categorys: [] // 乐居分类
    }
  },
  computed: {
    token() {
      return { token: getToken() }
    },
    lejuCategory() {
      const lejuCategorys = this.categorys.find(
        (item) => item.name === '乐居'
      )
      if (lejuCategorys) {
        return lejuCategorys.children
      }
      return []
    }
  },
  created() {
    this.getProductCategory()
  },
  methods: {
    // 获取商品分类
    async getProductCategory() {
      const { success, data, message } = await getAllCategory()
      if (success) {
        this.categorys = data.items.map((item) => {
          return {
            ...item.category,
            children: item.children
          }
        })
      } else {
        this.$message.error(message)
      }
    },
    async handleCategoryIconUpload(item, res) {
      if (res.success) {
        item.icon = res.data.fileUrl
        const { success, message } = await updateCategory(item)
        if (success) {
          this.$message.success('更新成功')
        } else {
          this.$message.error(message)
        }
      }
    }
  }
}
</script>
<style lang="scss" scope>
.category {
  margin: 30px;
  .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 30px;
  }
  .all-category {
    margin-bottom: 30px;
    .categorys {
      display: flex;
      justify-content: space-between;
      .category-card {
        width: 24.1%;

        .category-icon {
          width: 100%;
          height: 300px;
        }
      }
    }
  }
  .all-category-table{
    .table-icon{
      width: 60px;
      height: 60px;
    }
  }
}
</style>
